<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游</title>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <!-- 头部 -->

    <header>
        <div id="menu-bar" class="ri-menu-line"></div>
        <a href="#" class="logo"><span>T</span>ravel</a>
        <nav class="navbar">
            <a href="#home">主页</a>
            <a href="#book">预定</a>
            <a href="#packages">景点介绍</a>
            <a href="#services">服务</a>
            <a href="#gallery">展示</a>
            <a href="#review">人物</a>
            <a href="#contact">联系我们</a>
            <a href="./bookList.html" id="myRegister">我的预约</a>
            <div class="icons">
                <img src="./images/放大镜.svg" alt="" id="search-btn"
                    style="width: 35px; height: 35px; cursor: pointer; margin-right: 20px; margin-left: 10px;">
                <img src="./images/登录.svg" alt="" id="login-btn" style="width: 40px; height: 40px; cursor: pointer;">
            </div>
            <form class="search-bar-container">
                <input type="search" id="search-bar" placeholder="search here">
                <label for="search-bar" class="ri-search-line"></label>
            </form>
        </nav>
    </header>


    <!-- login form container  -->
    <div class="login-form-container">
        <form action="" id="login-form">
            <h3>登录</h3>
            <i id="form-close">x</i>
            <input type="email" placeholder="输入邮箱" class="box" name="email">
            <input type="password" placeholder="输入密码" class="box" name="password">
            <input type="submit" value="立即登录" class="btn">
            <input type="checkbox" id="remember">
            <label for="remember">记住我</label>
            <p>忘记密码 <a href="#">点击此处</a></p>
            <p>没有账号？ <a href="register.html">立即注册</a></p>
        </form>
    </div>


    <section class="home" id="home">
        <div class="content">
            <h3>Welcome to Japan</h3>
            <p>日本へようこそです</p>
            <a href="#" class="btn">探索更多</a>
        </div>
        <div class="controls">
            <span class="vid-btn active" data-src="./images/new-vid-1.mp4"></span>
            <span class="vid-btn" data-src="./images/new-vid-2.mp4"></span>
            <span class="vid-btn" data-src="./images/new-vid-3.mp4"></span>
            <span class="vid-btn" data-src="./images/new-vid-4.mp4"></span>
            <span class="vid-btn" data-src="./images/new-vid-5.mp4"></span>
        </div>

        <div class="video-container">
            <video src="images/new-vid-1.mp4" id="video-slider" loop autoplay muted></video>
        </div>

    </section>

    <!-- home section ends -->


    <!-- 预定 -->

    <section id="book" class="book">
        <h1 class="heading">
            <span>现</span>
            <span>在</span>
            <span>预</span>
            <span>定</span>
        </h1>
        <div class="row">
            <div class="image">
                <img src="./images/9nine.jpg" alt="">
            </div>
            <form action="" id="book-form">
                <div class="inputBox">
                    <h3>目的地</h3>
                    <input type="text" placeholder="place name" name="to">
                </div>
                <div class="inputBox">
                    <h3>预定人数</h3>
                    <input type="text" placeholder="number of guests" name="peopleNum">
                </div>
                <div class="inputBox">
                    <h3>出发时间</h3>
                    <input type="date" name="go-date">
                </div>
                <div class="inputBox">
                    <h3>返回时间</h3>
                    <input type="date" name="leave-date">
                </div>
                <input type="submit" class="btn" value="立即预定">
            </form>

        </div>
    </section>

    <!-- book section ends -->




    <section class="packages" id="packages">
        <h1 class="heading">
            <span>景</span>
            <span>点</span>
            <span>介</span>
            <span>绍</span>
        </h1>

        <div class="box-container">
            <div class="box" to="./北海道.html">
                <div class="image-container">
                    <img src="./images/北海道.jpg" alt="">
                    <img src="./images/北海道-.svg" class="img-map">
                </div>
                <div class="inner">
                    <div class="content">
                        <h3> <i class="ri-map-pin-fill"></i> 北海道 </h3>
                        <p>北海道的大自然提供了多种户外活动，而在山岳湖泊围绕下的北海道各城市，也有诸多美食与文化。</p>
                        <div class="price"> $90.00 <span>$120.00</span> </div>
                        <a href="#book" class="btn" >立即预定</a>
                    </div>
                    <div>
                        <span>点击查看详情</span>
                    </div>
                </div>
            </div>
            <div class="box" to="./关东.html">
                <div class="image-container">
                    <img src="./images/关东.jpg" alt="">
                    <img src="./images/关东-.svg" class="img-map">
                </div>
                <div class="inner">
                    <div class="content">
                        <h3> <i class="ri-map-pin-fill"></i> 关东 </h3>
                        <p>关东以世界最大都会区——东京为中心，但也拥有古朴的山区度假胜地和风光秀丽的亚热带岛屿</p>
                        <div class="price"> $90.00 <span>$120.00</span> </div>
                        <a href="#book" class="btn">立即预定</a>
                    </div>
                    <div>
                        <span>点击查看详情</span>
                    </div>
                </div>

            </div>

            <div class="box">
                <div class="image-container">
                    <img src="./images/九州.jpg" alt="">
                    <img src="./images/九州-.svg" alt="" class="img-map">
                </div>
                <div class="inner">
                    <div class="content">
                        <h3> <i class="ri-map-pin-fill"></i> 九州 </h3>
                        <p>陆海空交通发达的九州，以动感活力、文化涵养与休闲活动吸引着无数游客</p>
                        <div class="price"> $90.00 <span>$120.00</span> </div>
                        <a href="#book" class="btn">立即预定</a>
                    </div>
                    <div>
                        <span>点击查看详情</span>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="image-container">
                    <img src="./images/关西.jpg" alt="">
                    <img src="./images/关西-.svg" alt="" class="img-map">
                </div>
                <div class="inner">
                    <div class="content">
                        <h3> <i class="ri-map-pin-fill"></i> 关西 </h3>
                        <p>关西地区的娱乐活动众多：梦幻的夜生活、宁静的佛寺和神社、探索内在自我的朝圣之旅等等</p>
                        <div class="price"> $90.00 <span>$120.00</span> </div>
                        <a href="#book" class="btn">立即预定</a>
                    </div>
                    <div>
                        <span>点击查看详情</span>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="image-container">
                    <img src="./images/东海.jpg" alt="">
                    <img src="./images/东海-.svg" alt="" class="img-map">
                </div>
                <div class="inner">
                    <div class="content">
                        <h3> <i class="ri-map-pin-fill"></i> 东海 </h3>
                        <p>从东京到京都间的新干线通过东海地区，这里有全球知名景点和精彩的当地特色</p>
                        <div class="price"> $90.00 <span>$120.00</span> </div>
                        <a href="#book" class="btn">立即预定</a>
                    </div>
                    <div>
                        <span>点击查看详情</span>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="image-container">
                    <img src="./images/东北.jpg" alt="">
                    <img src="./images/东北-.svg" alt="" class="img-map">
                </div>
                <div class="inner">
                    <div class="content">
                        <h3> <i class="ri-map-pin-fill"></i> 东北 </h3>
                        <p>日本的东北地区拥有许多保存完好的乡村景观以及历史宝藏。这里夏天提供各种户外探险，冬天则能让您享受漫天的粉雪。</p>
                        <div class="price"> $90.00 <span>$120.00</span> </div>
                        <a href="#book" class="btn">立即预定</a>
                    </div>
                    <div>
                        <span>点击查看详情</span>
                    </div>
                </div>
            </div>

        </div>

    </section>




    <!-- services section starts  -->

    <section class="services" id="services">

        <h1 class="heading">
            <span>旅</span>
            <span>游</span>
            <span>服</span>
            <span>务</span>
        </h1>

        <div class="box-container">

            <div class="box">
                <i class="fas fa-hotel"></i>
                <h3>affordable hotels</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore commodi earum, quis voluptate
                    exercitationem ut minima itaque iusto ipsum corrupti!</p>
            </div>
            <div class="box">
                <i class="fas fa-utensils"></i>
                <h3>food and drinks</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore commodi earum, quis voluptate
                    exercitationem ut minima itaque iusto ipsum corrupti!</p>
            </div>
            <div class="box">
                <i class="fas fa-bullhorn"></i>
                <h3>safty guide</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore commodi earum, quis voluptate
                    exercitationem ut minima itaque iusto ipsum corrupti!</p>
            </div>
            <div class="box">
                <i class="fas fa-globe-asia"></i>
                <h3>around the world</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore commodi earum, quis voluptate
                    exercitationem ut minima itaque iusto ipsum corrupti!</p>
            </div>
            <div class="box">
                <i class="fas fa-plane"></i>
                <h3>fastest travel</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore commodi earum, quis voluptate
                    exercitationem ut minima itaque iusto ipsum corrupti!</p>
            </div>
            <div class="box">
                <i class="fas fa-hiking"></i>
                <h3>adventures</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore commodi earum, quis voluptate
                    exercitationem ut minima itaque iusto ipsum corrupti!</p>
            </div>

        </div>

    </section>

    <!-- services section ends -->

    <!-- gallery section starts  -->

    <section class="gallery" id="gallery">

        <h1 class="heading">
            <span>g</span>
            <span>a</span>
            <span>l</span>
            <span>l</span>
            <span>e</span>
            <span>r</span>
            <span>y</span>
        </h1>

        <div class="box-container">

            <div class="box">
                <img src="images/g-1.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-2.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-3.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-4.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-5.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-6.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-7.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-8.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>
            <div class="box">
                <img src="images/g-9.jpg" alt="">
                <div class="content">
                    <h3>amazing places</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, tenetur.</p>
                    <a href="#" class="btn">see more</a>
                </div>
            </div>

        </div>

    </section>


    <section class="review" id="review">
        <h1 class="heading">
            <span>r</span>
            <span>e</span>
            <span>v</span>
            <span>i</span>
            <span>e</span>
            <span>w</span>
        </h1>

        <div class="swiper-container review-slider">

            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="box">
                        <img src="./images/anima1.png" alt="">
                        <h3>title</h3>
                        <p>inner</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="box">
                        <img src="./images/anima1.png" alt="">
                        <h3>title</h3>
                        <p>inner</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="box">
                        <img src="./images/anima1.png" alt="">
                        <h3>title</h3>
                        <p>inner</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="box">
                        <img src="./images/anima1.png" alt="">
                        <h3>title</h3>
                        <p>inner</p>
                    </div>
                </div>

            </div>

        </div>

    </section>

    <!-- review section ends -->


    <!-- contact section starts  -->

    <section class="contact" id="contact">

        <h1 class="heading">
            <span>联</span>
            <span>系</span>
            <span>我</span>
            <span>们</span>
        </h1>

        <div class="row">

            <div class="image">
                <img src="images/qzay2.jpg" alt="">
            </div>

            <form action="">
                <div class="inputBox">
                    <input type="text" placeholder="name">
                    <input type="email" placeholder="email">
                </div>
                <div class="inputBox">
                    <input type="number" placeholder="number">
                    <input type="text" placeholder="subject">
                </div>
                <textarea placeholder="message" name="" id="" cols="30" rows="10"></textarea>
                <input type="submit" class="btn" value="send message">
            </form>

        </div>

    </section>

    <!-- contact section ends -->

    <!-- brand section  -->
    <section class="brand-container">

        <div class="swiper-container brand-slider">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/5.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/6.jpg" alt=""></div>
            </div>
        </div>

    </section>

    <!-- footer section  -->

    <section class="footer">

        <div class="box-container">

            <div class="box">
                <h3>about us</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda quas magni pariatur est
                    accusantium voluptas enim nemo facilis sit debitis.</p>
            </div>
            <div class="box">
                <h3>branch locations</h3>
                <a href="#">india</a>
                <a href="#">USA</a>
                <a href="#">japan</a>
                <a href="#">france</a>
            </div>
            <div class="box">
                <h3>quick links</h3>
                <a href="#">home</a>
                <a href="#">book</a>
                <a href="#">packages</a>
                <a href="#">services</a>
                <a href="#">gallery</a>
                <a href="#">review</a>
                <a href="#">contact</a>
            </div>
            <div class="box">
                <h3>follow us</h3>
                <a href="#">facebook</a>
                <a href="#">instagram</a>
                <a href="#">twitter</a>
                <a href="#">linkedin</a>
            </div>

        </div>

        <h1 class="credit"> created by <span> mr. web designer </span> | all rights reserved! </h1>

    </section>


    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

    <script src="./js/script.js"></script>
    <script src="./js/book.js"></script>
    <script src="./js/login.js"></script>
</body>

</html>